<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>12_DOM事件监听</title>
</head>
<body>
    <button onclick="alert('点击了')">按钮</button>
    <button id="btn">我是按钮</button>
    <h4>震惊！</h4>
    <div>
        <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium alias consectetur cumque deserunt
            doloribus, esse exercitationem facilis fugit impedit itaque maxime modi nemo pariatur, provident quasi
            ratione rerum saepe voluptates!
        </div>
        <div>Accusamus animi aperiam at beatae consequatur corporis distinctio dolor, dolorem dolorum ex harum id
            impedit in iusto laborum minus, nesciunt nihil numquam odio, quas repellat sit tempora veniam voluptate
            voluptates.
        </div>
        <div>Assumenda, consequatur consequuntur cupiditate dignissimos eius enim est exercitationem facere fugit hic
            iste iure magnam neque nisi odio perspiciatis quam quas quia quo quos recusandae rem, rerum soluta unde
            voluptatibus.
        </div>
        <div>Autem blanditiis consectetur deserunt fuga harum, laboriosam praesentium provident recusandae sapiente
            sequi ullam voluptas? Architecto dicta ex illo laboriosam optio quaerat sit vel! Accusamus deserunt
            explicabo nihil qui recusandae voluptatibus.
        </div>
        <div>Explicabo suscipit, vero! Alias, delectus dignissimos eos esse eum ex, fuga fugit ipsum labore magnam magni
            modi nesciunt optio placeat porro provident quos soluta tenetur veniam veritatis vero voluptas voluptatem.
        </div>
        <div>Ab cumque eligendi hic in ratione reprehenderit vero. Consectetur doloremque esse iusto possimus quasi,
            similique veniam? Accusantium asperiores at eos necessitatibus nemo quasi quia recusandae sint temporibus
            voluptatibus. Earum, quia.
        </div>
        <div>Consectetur delectus dolorem ea eaque earum excepturi, incidunt pariatur praesentium ratione soluta?
            Accusamus at atque cupiditate dignissimos dolor esse facilis in labore nesciunt porro, possimus, praesentium
            quo rerum sapiente veniam.
        </div>
        <div>Aliquam, consequatur dignissimos eaque enim explicabo fugit id impedit in laboriosam laborum libero minus
            nam nobis non nostrum perferendis temporibus velit. Amet at aut nostrum tenetur ut voluptate voluptates.
            Voluptate.
        </div>
        <div>Alias aliquam dolorem labore, nam omnis placeat vitae. Alias amet architecto at beatae blanditiis
            cupiditate illum libero maxime nostrum pariatur, quaerat ratione, sint sit. A eligendi in libero non vitae?
        </div>
        <div>Aut consequuntur, cumque debitis eligendi harum ipsam laudantium minima modi mollitia omnis provident
            quibusdam sapiente sint sit tempora totam ut. Assumenda cupiditate eaque iusto modi quia quidem, tenetur.
            Eveniet, iste?
        </div>
        <div>A ad animi atque consequatur, debitis, error exercitationem explicabo facilis harum hic in ipsum magnam nam
            nulla rerum similique sint tempora tenetur veritatis voluptates. Cum id magni pariatur reiciendis suscipit!
        </div>
        <div>Ab aliquam at culpa cumque eos et excepturi fuga, in ipsum maiores natus odit officia suscipit vero
            voluptatibus? A architecto aut commodi consequatur corporis enim ipsum laborum non quos sapiente!
        </div>
        <div>Accusantium dolore enim esse et expedita facere ipsum nam, nihil porro quaerat quis quos. Accusantium
            aspernatur dolore nulla numquam totam. Cumque dicta dignissimos dolorem harum sunt! Consequuntur doloribus
            molestias officia!
        </div>
        <div>Ab ad adipisci aliquid aut cum dignissimos excepturi facere ipsa iste maxime nihil perspiciatis possimus
            quasi quisquam recusandae reiciendis saepe veniam, voluptatem. Delectus earum non perspiciatis, rem sunt
            tempora totam.
        </div>
        <div>Alias cumque inventore vel vitae voluptate. Alias asperiores aspernatur at aut debitis distinctio, earum
            exercitationem explicabo fugit illo, ipsum necessitatibus nostrum, obcaecati quidem quisquam repellat vitae
            voluptatibus. Aliquid, magni nisi!
        </div>
        <div>Ab, accusamus animi aperiam blanditiis consequatur dicta dignissimos dolore dolorum eaque eos error eum ex
            harum id labore laudantium minus nulla obcaecati officiis provident qui quidem recusandae velit vero
            voluptate!
        </div>
        <div>Atque cumque earum ex, excepturi facere illo ipsam laboriosam necessitatibus nulla officia officiis quas
            quo ratione reiciendis sit. Autem commodi deserunt iure laborum officia, possimus quam vitae? Eum, qui,
            temporibus.
        </div>
        <div>Alias aperiam, aspernatur culpa cum dolor ducimus et facilis hic iste laboriosam maiores nesciunt nisi
            omnis provident quos rem sed sequi temporibus totam ullam, velit veritatis vitae! Delectus eum, repudiandae.
        </div>
        <div>Animi architecto at consequuntur cum, cupiditate delectus dolorem doloremque est fugiat libero molestiae
            mollitia nam nesciunt, nihil quae quam quasi quibusdam tempora tenetur voluptate? Ab nisi porro quisquam
            recusandae repellat.
        </div>
        <div>At blanditiis commodi consequuntur delectus dolor et, eum exercitationem fuga hic id in labore nesciunt,
            nulla optio perspiciatis quidem, repudiandae sint veniam vero voluptas! Dolorem illo ipsum provident quas
            vel.
        </div>
    </div>
</body>
    <script>
        let btnE = document.getElementById('btn');
        btnE.addEventListener('click', function (){
            alert('点击了2')
        })
        let h4E = document.querySelector('h4');
        h4E.addEventListener('mouseover', function (){
            console.log('标题被点击了')
        })
        window.addEventListener('resize', function (){
            //alert('resize')
        })
        window.addEventListener('scroll', function (){
            alert('scroll')
        })
    </script>
</html>